<template>
  <div class="design-form flex ">
    <div class="design-form-widget">
      <div class="design-form-widget-card" v-for="item in controlList">
        <div class="p-1">
          <el-text class="font-700">{{ item.title }}</el-text>
        </div>
        <VueDraggable class="design-form-widget-card-component" v-model="item.controlList" :animation="150"
          :group="{ name: 'people', pull: 'clone', put: false }" :clone="onClone">
          <div class="design-form-widget-card-component-item" v-for="control in item.controlList">
            <el-button plain class="cursor-move w-full">{{ control.name }}</el-button>
          </div>
        </VueDraggable>
      </div>
    </div>
    <el-form class="design-form-drag" label-width="auto" v-bind="formSetting.formStyle">
      <VueDraggable class="design-form-drag-box" v-model="formSetting.formItemList" :animation="150" group="people"
        @end="onEnd">
        <template v-for="(field, index) in formSetting.formItemList">
          <FromGroup :field="field" @copyControl="copyControl(field)" @copyControlGroup="copyControl"
            @deleteControl="deleteControl(field)" @click="clickControl(field)" @clickControlGroup="clickControl"
            :isSelectedControl="isSelectedControl">
          </FromGroup>
        </template>
      </VueDraggable>
    </el-form>
    <ControlSetting :formSetting="formSetting" :formField="isSelectedControl" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { VueDraggable, DraggableEvent } from "vue-draggable-plus";
import { FormControlGroup, FormField, FormControl, FormSetting } from ".";
import { uniqueId } from "@/utils/uuid";


const controlList = ref<FormControlGroup[]>([
  {
    title: '布局控件',
    controlList: [
      {
        group: 'layout',
        type: "grid",
        name: "栅格布局"
      }
    ]
  },
  {
    title: '基础控件',
    controlList: [
      {
        group: 'form',
        type: "input",
        dataType: "string",
        name: "单行输入",
      },
      {
        group: 'form',
        type: "textarea",
        dataType: "string",
        name: "多行输入",
      },
      {
        group: 'form',
        type: "inputNumber",
        dataType: "number",
        name: "数字输入",
      },
      {
        group: 'form',
        type: "inputTag",
        dataType: "array",
        name: "标签输入",
      },
      {
        group: 'form',
        type: "radio",
        dataType: "string",
        name: "单选框",
        options: [
          { label: "男", value: 1 },
          { label: "女", value: 2 },
        ],
      },
      {
        group: 'form',
        type: "checkbox",
        dataType: "array",
        name: "多选框",
        options: [
          { label: "男", value: 1 },
          { label: "女", value: 2 },
        ],
      },
      {
        group: 'form',
        type: "select",
        dataType: "string",
        name: "下拉框",
      },
      {
        group: 'form',
        type: "date",
        dataType: "date",
        name: "日期框",
      },
      {
        group: 'form',
        type: "switch",
        dataType: "boolean",
        name: "开关",
      },
      {
        group: 'form',
        type: "slider",
        dataType: "number",
        name: "滑块",
      },
      {
        group: 'form',
        type: "rate",
        dataType: "number",
        name: "评分",
      },
    ]
  }
])

//当前选中的组件
const isSelectedControl = ref<FormField>({});


const clickControl = (control: FormField) => {
  isSelectedControl.value = control;
};

const onClone = (element: FormControl) => {
  const id = uniqueId();
  isSelectedControl.value = {};
  isSelectedControl.value.id = id;
  isSelectedControl.value.group = element.group;
  isSelectedControl.value.type = element.type;
  isSelectedControl.value.dataType = element.dataType;
  isSelectedControl.value.attrs = {};
  if (element.group === 'form') {
    isSelectedControl.value.item = {
      prop: element.name,
      label: element.name,
      labelPosition: "",
      labelWidth: 'auto',
      showMessage: true,
      inlineMessage: false, //true，错误信息会占高度
      rules: []
    }
    isSelectedControl.value.options = element.options;
  } else if (element.group === 'layout') {
    if (element.type === 'grid') {
      isSelectedControl.value.attrs = { gutter: 20, cols: 2, layout: 1 };
      isSelectedControl.value.formItemList = [];
    }
  }

  return isSelectedControl.value;
};

const onEnd = (event: DraggableEvent) => {
  isSelectedControl.value = event.data;
};

const formSetting = defineModel<FormSetting>('formSetting');

const copyControl = (field: FormField) => {
  const obj = JSON.parse(JSON.stringify(field));
  const newField = obj as FormField;
  newField.id = uniqueId();
  if (newField.group === 'layout') {
    newField.formItemList.forEach(x => {
      x.id = uniqueId();
      x.formItemList.forEach(y => y.id = uniqueId())
    })
  }
  formSetting.value.formItemList.push(newField);
};

const deleteControl = (field: FormField) => {
  formSetting.value.formItemList = formSetting.value.formItemList.filter((x) => x.id != field.id);
};
</script>

<style lang="scss" scoped>
.design-form {
  height: calc(100% - 53px);
}

.design-form-widget {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ddd;
  gap: 8px;
  padding: 16px;
  width: 300px;
}

.design-form-widget-card {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.design-form-widget-card-component {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.design-form-widget-card-component-item {
  width: 50%;
  padding: 4px;
}


.design-form-drag {
  flex: 1 1 0%;
  padding: 16px;
  overflow-y: auto;
}

.design-form-drag-box {
  min-height: 100%;
  border: 1px dashed #999;
  display: flex;
  flex-direction: column;
  padding: 6px;

  .drag-form-item {
    padding: 8px;

    .custom-item {
      margin-top: 10px;
      margin-bottom: 10px;
    }

    &:hover {
      background-color: #e6f4ff;
    }
  }
}
</style>
